<template>
  <div class="template">
    <van-nav-bar @click-left="onClickLeft">
      <template #left>
        <div class="left">
          <van-icon class="icon" name="arrow-left" size="20" color="#000" />
          <div class="user_picture">
            <van-image
              round
              width="33px"
              height="33px"
              :src="state.commDetail.user_picture"
            />
          </div>
          <div class="user-box">
            <span class="user_name">{{ state.commDetail.user_name }}</span>
            <span class="add_time_formated">{{
              state.commDetail.add_time_formated
            }}</span>
          </div>
        </div>
      </template>
      <template #right>
        <van-icon name="share-o" size="20" color="#000" />
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      height="423.36"
      show-indicators
    >
      <van-swipe-item v-for="item in state.goods_gallery" v-bind:key="item">
        <img alt="" height="423.36" width="360" :src="item" />
      </van-swipe-item>
    </van-swipe>
    <div class="comment-explain">
      <span class="comment-content">{{ state.commDetail.content }}</span>
    </div>
    <div class="goods_item">
      <div class="goods_left">
        <van-image width="95" height="95" :src="state.commDetail.goods_thumb" />
      </div>
      <div class="goods_right">
        <span class="right_size">{{ state.commDetail.goods_name }}</span>
        <div class="price_box">
          <span class="size-16"> {{ state.commDetail.shop_price }} </span>
          <span class="size-10"> {{ state.commDetail.market_price }} </span>
        </div>
      </div>
    </div>

    <div class="comments_box">
      <span class="comments_title"> 相关评论 </span>
      <div class="comments_list" >
            <span class="comment_count"> 共{{state.reply.length}}条评论 </span>
            
          
      <van-pull-refresh v-model="state.refreshing" >
        <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="comments_list_item" v-for="item in state.reply" v-bind:key=item>
              <div class="item_left">
                <van-image
                  round
                  width="30px"
                  height="30px"
                  :src=item.user_picture
                />
              </div>
              <div class="item_right">
                <span class="lh"> {{item.user_name}} </span>
                <div class="right_box_bottom">
                  <span class="size_16">{{item.content}}</span>
                  <span class="size_12">{{item.add_time_formated}}</span>
                </div>
              </div>
            </div>
        </van-list>
      </van-pull-refresh>
      </div>
    </div>

    <div class="footer">
      <div>
        <input type="text" class="comment-area" placeholder="说点什么..." />
      </div>
      <div class="footer-icon">
        <div class="zan">
          <van-icon name="good-job-o" size="25px" color="#333" />
          <span class="zan-fize footer-size">9</span>
        </div>
        <div class="comment-icon">
          <van-icon name="comment-o" size="25px" color="#333" />
          <span class="comment-size footer-size">{{state.reply.length}}</span>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import { reactive } from "vue";
import store from "../../../store/index.js";
import router from "../../../router/index.js";
// import { Toast } from 'vant';

export default {
  setup() {
    const state = reactive({
      commDetail: [],
      size: 10,
      page: 1,
      goods_gallery: [],
      reply: [],
      dis_id:0
    });

    const onClickLeft = () => router.go(-1);
  
    const onLoad = () => {
      store
        .dispatch({
          type: "getReply",
          dis_id: router.currentRoute.value.params.id,
          size: state.size,
          page: state.page,
          loading: false,
          finished: false,
        })
        .then((data) => {
          state.reply = data;
          state.page = state.page + 1;
          state.loading = true;
          state.finished = true;
        });
    };

    return {
      state,
      onClickLeft,
      onLoad,
    };
  },

  mounted() {
    store
      .dispatch({
        type: "getCommDetail",
        dis_id: this.$route.params.id,
      })
      .then((data) => {
        this.state.commDetail = data;
        this.state.goods_gallery = data.goods_gallery;
      });
  },
};
</script>





<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.template {
  background-color: #f4f4f4;
  margin-bottom: 70px;
}
.left {
  display: flex;
  //   line-height: 46px;
  align-items: center;
  .icon {
    line-height: 46px;
    margin-right: 16px;
  }
  .user_picture {
    margin-top: 6.5px;
  }
  .user-box {
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    //  align-items: center;
    .user_name {
      font-size: 14px;
      color: #333;
      height: 16px;
    }
    .add_time_formated {
      font-size: 12px;
      color: #888;
      height: 16px;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
}
.comment-explain {
  position: relative;
  //   width: 100%;
  padding: 32px 24px;
  border-radius: 16px;
  background: white;
  margin-bottom: 10px;
  .comment-content {
    color: #333;
    font-size: 14px;
    line-height: 25px;
  }
}
.goods_item {
  padding: 15px;
  background-color: #fff;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  .goods_left {
    width: 95px;
    height: 95px;
  }
  .goods_right {
    padding: 5px 0 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right_size {
      font-size: 16px;
      color: #333;
      font-weight: 500;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .size-16 {
      font-size: 16px;
      font-weight: 500;
      color: #f0151b;
      margin-right: 11px;
    }
    .size-10 {
      font-size: 10px;
      font-weight: 400;
      color: #888;
      text-decoration: line-through;
    }
  }
}

.comments_box {
  font-weight: 500;
  .comments_title {
    display: inline-block;
    padding: 15px 0 15px 12px;
    color: #333;
    font-size: 18px;
  }
  .comments_list {
    padding: 21px 12px 0 12px;
    background-color: #fff;
    border-radius: 16px;
    .comment_count {
      display: inline-block;
      margin-bottom: 20px;
    }
    .comments_list_item {
      display: flex;
      // justify-content: space-between;
      padding-bottom: 15px;
      .item_left {
        margin: 5px 14px 0 0;
      }
      .item_right {
        font-size: 14px;
        color: #888;
        padding-bottom: 15px;
        flex-grow: 1;
        border-bottom: 1px solid #e6e6e6;
        .lh {
          margin-bottom: 5px;
        }
        .right_box_bottom {
          .size_16 {
            font-size: 16px;
            color: #333;
          }
          .size_12 {
            font-size: 12px;
            margin-left: 5px;
          }
        }
      }
    }
  }
}

.footer {
  width: 100%;
  height: 62px;
  position: fixed;
  bottom: 0;
  border-top: 1.6px solid #e6e6e6;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  .comment-area {
    width: 175px;
    height: 17px;
    padding: 9px 17.5px;
    border-radius: 15px;
    background-color: #f4f4f4;
    outline-style: none;
    border: none;
  }
  .footer-icon {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .footer-size {
    display: inline-block;
    // line-height: 50px;
  }
  .comment-icon {
    margin-left: 20px;
    // display: inline-block;
  }
}
</style>
